import React from 'react';
import { Form, Input, Select, Button, Checkbox } from 'antd';
import './SingleAdd.css';
import { BulbOutlined } from '@ant-design/icons';

const { Option } = Select;

const SingleAdd: React.FC = () => {
  const [form] = Form.useForm();

  const handleSubmit = () => {
    form.validateFields()
      .then(values => {
        console.log('Form values:', values);
      })
      .catch(info => {
        console.error('Validate Failed:', info);
      });
  };

  return (
    <div className="form-container unique-single-add-form">
      <h2>单个添加</h2>
      <p className="tips">
        <span><BulbOutlined style={{ fontSize: '1.125rem', marginRight: '0.125rem' }} /> Tips:</span> 添加成员账号，成员通过用户名和初始密码登录系统，修改初始密码后进入组织
      </p>
      <Form form={form} layout="vertical" onFinish={handleSubmit} >
        <div className="form-row">
          <Form.Item name="realName" label="姓名" rules={[{ required: true, message: '请输入真实姓名' }]}>
            <Input placeholder="请输入真实姓名" style={{ width: '20.9375rem', maxWidth: '25rem', height: '2.5rem', borderRadius: '0.25rem', padding: '0.5rem' }} />
          </Form.Item>
          <Form.Item name="username" label="登录用户名" rules={[{ required: true, message: '请输入登录用户名' }]}>
            <Input placeholder="请输入登录用户名" style={{ width: '20.9375rem', maxWidth: '25rem', height: '2.5rem', borderRadius: '0.25rem', padding: '0.5rem' }} />
          </Form.Item>
        </div>
        <div className="form-row">
          <Form.Item name="email" label="邮箱地址" rules={[{ required: true, message: '请输入邮箱地址' }]}>
            <Input placeholder="请输入邮箱地址" style={{ width: '20.9375rem', maxWidth: '25rem', height: '2.5rem', borderRadius: '0.25rem', padding: '0.5rem' }} />
          </Form.Item>
          <Form.Item name="password" label="初始密码" rules={[{ required: true, message: '请输入初始密码' }]}>
            <Input placeholder="请输入初始密码" style={{ width: '20.9375rem', maxWidth: '25rem', height: '2.5rem', borderRadius: '0.25rem', padding: '0.5rem' }} />
          </Form.Item>
        </div>
        <div className="form-row">
          <Form.Item name="school" label="所属学校" rules={[{ required: true, message: '请输入学校名称' }]}>
            <Input placeholder="请输入学校名称" style={{ width: '20.9375rem', maxWidth: '25rem', height: '2.5rem', borderRadius: '0.25rem', padding: '0.5rem' }} />
          </Form.Item>
          <Form.Item name="team" label="所属团队" initialValue="智链Link">
            <Input disabled style={{ width: '20.9375rem', maxWidth: '25rem', height: '2.5rem', borderRadius: '0.25rem', padding: '0.5rem', color: 'black' }} />
          </Form.Item>
        </div>
        <div className="form-row">
          <Form.Item name="gender" label="性别" rules={[{ required: true, message: '请选择性别' }]}>
            <Select placeholder="请选择性别" style={{ width: '20.9375rem', maxWidth: '25rem', height: '2.5rem' }} dropdownStyle={{ maxHeight: '12.5rem' }}>
              <Option value="male">男</Option>
              <Option value="female">女</Option>
            </Select>
          </Form.Item>
          <Form.Item name="studentId" label="学号" rules={[{ required: true, message: '请输入学号' }]}>
            <Input placeholder="请输入学号" style={{ width: '20.9375rem', maxWidth: '25rem', height: '2.5rem', borderRadius: '0.25rem', padding: '0.5rem' }} />
          </Form.Item>
        </div>
        <div className="form-row form-actions">
          <Form.Item name="continue" valuePropName="checked">
            <Checkbox>继续添加下一条</Checkbox>
          </Form.Item>
          <Form.Item>
            <Button className="singlebutton" type="primary" htmlType="submit">
              确定
            </Button>
          </Form.Item>
        </div>
      </Form>
    </div>
  );
};

export default SingleAdd;
